<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>创建项目</title>
    <meta name="keywords" content="创建项目">
    <meta name="description" content="创建项目">


    <link href="<?= base_url('assets/css/bootstrap.min.css?v=3.3.6') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/font-awesome.css?v=4.4.0') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/animate.css') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/style.css?v=4.1.0') ?>" rel="stylesheet">

    <link href="<?= base_url('assets/css/plugins/iCheck/custom.css') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/plugins/steps/jquery.steps.css?v=6') ?>" rel="stylesheet">



</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInRight">


        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>创建项目</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>



                        </div>
                    </div>

                    <div class="ibox-content">

                        <p>
                            您可以先创建项目后,可以跳过后面的步骤.后续再设置 其他功能哦!
                        </p>

                        <form id="form" action="form_wizard.html#" class="wizard-big">
                            <h1>创建项目</h1>
                            <fieldset>
                                <h2>项目信息</h2>
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <label>项目名称*</label>
                                            <input  name="pname" id="pname" type="text" class="form-control required">
                                        </div>
                                        <div class="form-group">
                                            <label>项目简介*</label>
                                            <textarea  name="remark" id="remark" class="form-control required" ></textarea>

                                        </div>

                                    </div>

                                </div>

                            </fieldset>

                            <h1>创建语言</h1>
                            <fieldset>
                                <h2>添加项目语言类型</h2>
                                <div >


                                        <div id="lang_content">


                                               <div class="row lang_form_row" style="margin-top: 20px">
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label"></label>
                                                            <div class="col-sm-10">
                                                                <div class="row">
                                                                    <div class="col-md-2">
                                                                        <input type="text" placeholder="语言名称" name="lname" class="form-control mrequired">
                                                                    </div>
                                                                    <div class="col-md-2">
                                                                        <input type="text" placeholder="语言简写 例如 zh|en" name="lshotname" class="form-control mrequired">
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <input type="text" placeholder="备注说明" class="form-control" name="lremark">
                                                                    </div>


                                                                    <div class="col-md-3">
                                                                        <button class="btn btn-primary" type="button" onclick="removeLang(this)"><i class="fa fa-trash"></i>删除</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                               </div>

                                       </div>


                                        <div class="hr-line-dashed" style="border-top: 1px dashed #000000"></div>


                                        <div class="row">
                                                <div class="form-group">
                                                    <div class="col-sm-4 col-sm-offset-2">
                                                        <button class="btn btn-primary" type="button" onclick="addlang()"><i class="fa fa-plus"></i>增加语言</button>
                                                    </div>
                                                </div>
                                        </div>


                                </div>
                            </fieldset>


                            <h1>创建KEY</h1>


                            <fieldset>

                                <h2>添加项目KEY</h2>
                                <div>
                                    <div id="key_content">
                                        <div class="row key_form_row" style="margin-top: 20px">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label"></label>
                                                <div class="col-sm-10">
                                                    <div class="row">
                                                        <div class="col-md-2">
                                                            <input type="text" placeholder="KEY名称" class="form-control mrequired" name="pkey">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <input type="number" placeholder="限制长度" class="form-control mrequired" name="limit_length" value="-1">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <input type="text" placeholder="备注说明" class="form-control" name="kremark">
                                                        </div>


                                                        <div class="col-md-3">
                                                            <button class="btn btn-primary" type="button" onclick="removeKey(this)"><i class="fa fa-trash"></i>删除</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <div class="hr-line-dashed" style="border-top: 1px dashed #000000"></div>


                                    <div class="row">
                                        <div class="form-group">
                                            <div class="col-sm-4 col-sm-offset-2">
                                                <button class="btn btn-primary" type="button" onclick="addKey()"><i class="fa fa-plus"></i>增加KEY</button>
                                            </div>
                                        </div>
                                    </div>


                                </div>




                            </fieldset>




                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <?php include "include/admin_foot_script.php" ?>
    <!-- 自定义js -->
    <script src="<?= base_url('assets/js/content.js?v=1.0.0') ?>"></script>
    <!-- Steps -->
    <script src="<?= base_url('assets/js/plugins/staps/jquery.steps.min.js') ?>""></script>



    <script>

        $(function() {






        });

   function removeLang(obj) {
       $(obj).parent().parent().parent().parent().parent().remove();
    }


    function removeKey(obj) {
        $(obj).parent().parent().parent().parent().parent().remove();
    }

        function addKey() {

             var lang_input = '<div class="row key_form_row" style="margin-top: 20px"><div class="form-group">  <label class="col-sm-2 control-label"></label><div class="col-sm-10"> <div class="row">'
             +
             ' <div class="col-md-2"> <input type="text" placeholder="KEY名称" class="form-control mrequired" name="pkey"></div>'
             +
             '<div class="col-md-2"> <input type="number" placeholder="限制长度" class="form-control mrequired" name="limit_length" value="-1"> </div>'
             +
             '<div class="col-md-4"> <input type="text" placeholder="备注说明" class="form-control" name="kremark"> </div>'
             +
             '<div class="col-md-3"> <button class="btn btn-primary" type="button" onclick="removeKey(this)"><i class="fa fa-trash"></i>删除</button></div>'
             +
             '</div></div> </div></div>';

             $("#key_content").append(lang_input);

        }


    function addlang() {

        // alert("xxx");

        var lang_input = '<div class="row lang_form_row" style="margin-top: 20px"><div class="form-group">  <label class="col-sm-2 control-label"></label><div class="col-sm-10"> <div class="row">'
            +
            ' <div class="col-md-2"> <input type="text" placeholder="语言名称" class="form-control mrequired" name="lname" ></div>'
            +
            '<div class="col-md-2"> <input type="text" placeholder="语言简写 例如 zh|en" class="form-control mrequired" name="lshotname"> </div>'
            +
            '<div class="col-md-4"> <input type="text" placeholder="备注说明" class="form-control" name="lremark"> </div>'
            +
            '<div class="col-md-3"> <button class="btn btn-primary" type="button" onclick="removeLang(this)"><i class="fa fa-trash"></i>删除</button></div>'
            +
            '</div></div> </div></div>';

        $("#lang_content").append(lang_input);

    }

    $(document).ready(function () {
            $("#form").steps({

                bodyTag: "fieldset",
                onStepChanging: function (event, currentIndex, newIndex) {
                    // Always allow going backward even if the current step contains invalid fields!
                    if (currentIndex > newIndex) {
                        return true;
                    }

                    var form = $(this);
                    // Clean up if user went backward before
                    if (currentIndex < newIndex) {
                        // To remove error styles
                        $(".body:eq(" + newIndex + ") label.error", form).remove();
                        $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                    }

                    // Disable validation on fields that are disabled or hidden.
                    form.validate().settings.ignore = ":disabled,:hidden";

                    // Start validation; Prevent going forward if false

                   // return true;
                    return formValid(currentIndex);
                },

                onStepChanged: function (event, currentIndex, priorIndex) {


                },

                onFinishing: function (event, currentIndex) {
                    var form = $(this);

                    // Disable validation on fields that are disabled.
                    // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                    form.validate().settings.ignore = ":disabled";

                    // Start validation; Prevent form submission if false

                    return formValid(currentIndex);
                },

                onFinished: function (event, currentIndex) {


                    if (formValid(currentIndex) && currentIndex == 2)  {
                        submitForm();
                        //提交表单
                    } else {

                    }



                    //alert("xxx");
                    /*
                    var form = $(this);
                    // Submit form input
                    form.submit();*/
                },

                onCanceled:function (event) {
                    window.location.href = '<?= base_url("admin/project/projects") ?>';
                },
                    labels: {
                        cancel: "返回项目",
                        finish: "完成",
                        next: "下一步",
                        previous: "上一步",
                        loading: "加载中 ..."
                    }
            }



            ).validate({
                errorPlacement: function (error, element) {
                    element.before(error);
                },
                rules: {

                }
            });
        });




    function duplicates(arr) {
        var result = [];
        arr.forEach(function(item){
            if(arr.indexOf(item)!=arr.lastIndexOf(item)&&result.indexOf(item)==-1)
                result.push(item);
        })
        return result;
    }


    function submitForm() {

           var arrayLang = new Array();
           var arrayKey = new Array();
           var arrayKeyTemp = new Array();

           $("#lang_content .lang_form_row").each(function () {
               var lang = {
                   "name":  $(this).find("[name= 'lname']").val(),
                   "shorthand": $(this).find("[name= 'lshotname']").val(),
                   "remark": $(this).find("[name= 'lremark']").val()
               };
               arrayLang.push(lang);
           });


           $("#key_content .key_form_row").each(function () {
               var key = {
                   "pkey":  $(this).find("[name= 'pkey']").val(),
                   "limit_length": $(this).find("[name= 'limit_length']").val(),
                   "remark": $(this).find("[name= 'kremark']").val()
               };

               arrayKeyTemp.push(key.pkey);
               arrayKey.push(key);
           });




        var duplicateKeys = duplicates(arrayKeyTemp);

        if (duplicateKeys.length > 0) {
            toastr.error("以下KEY值重复: " + duplicateKeys +". 请仔细检查KEY值有再保存", '提示');
            return ;
        }

        $.post("<?= base_url("admin/project/add") ?>",
            {"pname": $("#pname").val(),
                "remark": $("#remark").val(),
                "langs": JSON.stringify(arrayLang),
                "keys": JSON.stringify(arrayKey)},

            function (res) {

                if (res.code == 200) {
                    toastr.success("创建成果成功", '提示');
                    window.location.href = '<?= base_url("admin/project/projects") ?>';
                } else {
                    toastr.error(res.msg, '提示');
                }

        }, "json");


       }

        function formValid(currentIndex) {
            var form =  $("#form");
            var valid = true;

            if (currentIndex == 0) {
                return form.valid();
            } else if (currentIndex == 1 ) {
                $("#lang_content .row .mrequired").each(function(){
                    if ( $(this).val() == "") {
                        $(this).addClass("error");
                        valid = false;
                    }
                });

               // submitForm();

                return valid;

                return valid;
            } else if (currentIndex == 2) {
                $("#key_content .row .mrequired").each(function(){
                    if ( $(this).val() == "") {
                        $(this).addClass("error");
                        valid = false;
                    }
                });
                return valid;
            }

            return valid;
        }


    setInterval("removeError()",  500);


        function removeError() {

            $("#lang_content .row .mrequired").each(function(){
                if ( $(this).val() != "") {
                    $(this).removeClass("error");

                }
            });


            $("#key_content .row .mrequired").each(function(){
                if ( $(this).val() !=  "") {
                    $(this).removeClass("error");

                }
            });

        }


    </script>



</body>

</html>
